<template>
  <view class="scoll">
    <uv-scroll-list :indicator="false">
      <view class="list">
        <view class="item" :class="{ active: current == item.date }" v-for="(item, index) in dayList" :key="index" @click="onTab(item)">{{ item.day }}</view>
      </view>
    </uv-scroll-list>
  </view>
</template>

<script setup>
import { ref } from 'vue';
import { onLoad } from '@dcloudio/uni-app';
import { formatTimeData } from '@/common';

const emit = defineEmits(['click']);
let current = ref(0);
let dayList = ref([]);

onLoad(() => {
  dayList.value = getSevenDaysFromToday().map(e => {
    return{
      day: formatTimeData(e, false),
      date: e
    }
  });
  dayList.value = [{ day: '全部', date: 0 }, ...dayList.value];
})

function getSevenDaysFromToday() {
  const result = [];
  const today = new Date();
  for (let i = 0; i < 7; i++) {
    const date = new Date(today);
    date.setDate(today.getDate() + i);

    const year = date.getFullYear();
    const month = (date.getMonth() + 1).toString().padStart(2, '0');
    const day = date.getDate().toString().padStart(2, '0');
    result.push(`${year}-${month}-${day}`);
  }
  return result;
}
function onTab(row){
  current.value = row.date;
  emit('click', row.date);
}
</script>

<style lang="scss" scoped>
  .scoll{
    width: 100%;
    padding-top: 24rpx;
    .list{
      display: flex;
      align-items: center;
      .item{
        width: 144rpx;
        height: 58rpx;
        line-height: 58rpx;
        background-color: #F0F0F0;
        border-radius: 58rpx;
        text-align: center;
        font-size: 26rpx;
        color: #000000;
        margin-right: 8rpx;
        &.active{
          background-color: #E43222;
          color: #FFFFFF;
        }
      }
    }
  }
</style>